<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="JQuery/jquery-1.11.1.js"></script>
<script type="text/javascript">
//创建XMLHttpRequest异步对象函数
function createxmlHttpRequest() {
	try {
		return new XMLHttpRequest();  //支持大多数浏览器
	} catch (e) {
		try {
			 return  new ActiveXObject("Msxml2.XMLHTTP");     //支持IE6.0版本
		} catch (e) {
			try {
				return  new ActiveXObject("Microsoft.XMLHTTP");  //支持IE5.5及以下版本
			} catch (e) {
				throw e;
			}
		}
	}
}
    window.onload = function() {   //文档加载完毕后执行
    	$("#btn").click(function() {    //给按钮添加点击事件
    		/*
    		  ajax四步操作，得到服务器的响应，把响应结果显示到h1元素中
    		*/
    		//1、得到异步对象
    		var xmlHttp = createxmlHttpRequest();
    	    //2、打开与服务器的连接
        	xmlHttp.open("GET","/ajax/AjaxXMLServlet",true);
        	//3、发送请求
        	xmlHttp.send(null);  //GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
        	//4、给异步对象的onreadystatechange对象注册监听器
        	xmlHttp.onreadystatechange = function() {   //当xmlHttp的状态发送变化时执行
        		//双重判断：xmlHttp的状态为4(服务器响应结束)，以及服务器响应的状态码为200(响应成功)
        		if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
        			//获取服务器的响应结果(xml)
        			var doc = xmlHttp.responseXML;
        			//查询文档下名为Student的所有元素，的到数组，再取下标为0的元素
        			var ele = doc.getElementsByTagName("Student")[0];
        			//获取元素名为number的属性值
        			var number = ele.getAttribute("number");
        			var name;
        			var age;
        			if(window.addEventListener) {  //处理浏览器差异
        				name = doc.getElementsByTagName("name")[0].textContent;   //支持火狐等其他浏览器
        			} else {
        			    name = doc.getElementsByTagName("name")[0].text;    //支持IE
        			}
        			if(window.addEventListener) {  //处理浏览器差异
        				age = doc.getElementsByTagName("age")[0].textContent;   //支持火狐等其他浏览器
        			} else {
        				age = doc.getElementsByTagName("age")[0].text;    //支持IE
        			}
        			var xmlText = number + " , " + name + " , " + age;
        			document.getElementById("h1").innerHTML = xmlText;
        		}
        	}
    	});
    }
</script>
</head>
<body>
  <button id="btn">Ajax案例</button>
  <h1 id="h1"></h1>
</body>
</html>